﻿@model Scap.Info.ScapEmployee
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/siteZKT.css")
    @Styles.Render("~/Content/ZKT-themes/jquery-ui-1.10.2.custom.css")
    @Styles.Render("~/Content/aciTree.css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div id="ZKT_body">
        <div id="ZKT_header">
            <div class="sfactive" style="margin-bottom: 5px; margin-top: 5px;">Empleados -> @ViewBag.Title&nbsp;<span style="padding-left: 250px;">@Html.ActionLink("Cancelar", "Index", "Employee")</span></div>
            <div style="margin: 0px auto 5px auto; padding-left: 30px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; text-align: justify; background-color: #ccddee;">
                @*                            Personnel information is the system’s basic information, so No. and department are required items. 
Fingerprint registration needs to be driven by a fingerprint scanner.If you have not installed such a driver yet, download one first! 
A black-and-white attendance machine supports only 5-digit passwords, a color attendance machine supports 8-digit passwords.If a password exceeds the specified length, the system will truncate it automatically! *@
                La información personal es la información básica del sistema, por lo que el número de Identificación, el departamento y el correo son elementos requeridos.
El registro de las huellas dactilares tiene que ser efectuado por un escáner. Si no se ha instalado el programa para el escáner, hágalo primero!
Una máquina para registro de asistencias en blanco y negro sólo admite contraseñas de 5 dígitos, una máquina para registro de asistencias de color permite contraseñas de 8 dígitos. Si una contraseña excede la longitud especificada, el sistema la truncará automáticamente!

            </div>
        </div>


        @using (Html.BeginForm("AddEmployee", "tabsEmpleado", FormMethod.Post, new { id = "submitAddEditid" }))
        {
            @Html.ValidationSummary(true)
            @Html.HiddenFor(model => model.Id)
            <div id="ZKT_container">
                <div id="ZKT_center" class="ZKT_column">
                    <div class="tblvios02">
                        <table style="width: 100%; margin: 0px auto 0px auto;">
                            <tr>
                                <td colspan="4" class="editor-label" style="text-align: left">
                                    <label>Perfil Empleado</label></td>
                            </tr>
                            <tr>
                                <td class="editor-label">@Html.LabelFor(model => model.Identification)</td>
                                <td class="editor-field">@Html.EditorFor(model => model.Identification)&nbsp;<span class="error">*</span>
                                    @Html.ValidationMessageFor(model => model.Identification)
                                </td>
                                <td class="editor-label">
                                    <label>Nacionalidad</label></td>
                                <td class="editor-field"></td>
                            </tr>
                            <tr>
                                <td class="editor-label">@Html.LabelFor(model => model.FirstName)
                                </td>
                                <td class="editor-field">@Html.EditorFor(model => model.FirstName)&nbsp;<span class="error">*</span>
                                    @Html.ValidationMessageFor(model => model.FirstName)</td>
                                <td class="editor-label">@*Html.LabelFor(model => model.ResidenceCityId)*@<label>Ciudad de Residencia</label>
                                </td>
                                <td class="editor-field">
                                    @Html.DropDownList("ResidenceCityId", (IEnumerable<SelectListItem>)ViewBag.AddressId, "Seleccionar Ciudad", new { id = "ResidenceCityIdselectorid" })
                                    <div style="display: none">
                                        @Html.EditorFor(model => model.ResidenceCityId)
                                        @Html.ValidationMessageFor(model => model.ResidenceCityId)
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="editor-label">@Html.LabelFor(model => model.LastName)</td>
                                <td class="editor-field">@Html.EditorFor(model => model.LastName)&nbsp;<span class="error">*</span>
                                    @Html.ValidationMessageFor(model => model.LastName)</td>
                                <td class="editor-label">@*Html.LabelFor(model => model.PostalCode)*@<label>Código Postal</label></td>
                                <td class="editor-field">@Html.EditorFor(model => model.PostalCode)
                                    @Html.ValidationMessageFor(model => model.PostalCode)</td>
                            </tr>
                            <tr>
                                <td class="editor-label">@Html.LabelFor(model => model.Genre)</td>
                                <td class="editor-field">
                                    @Html.DropDownList("Genre", (IEnumerable<SelectListItem>)ViewBag.GeneroList, "Seleccione Genero", new { id = "selectGeneroHlp01Id", width = "205px" })
                                    <div class="editor-field" style="display: none;">
                                        @Html.EditorFor(model => model.Genre)
                                        @Html.ValidationMessageFor(model => model.Genre)
                                    </div>
                                </td>
                                <td class="editor-label">@*Html.LabelFor(model => model.BusinessPhone)*@<label>Teléfono Trabajo</label></td>
                                <td class="editor-field">@Html.EditorFor(model => model.BusinessPhone)
                                    @Html.ValidationMessageFor(model => model.BusinessPhone)</td>
                            </tr>
                            <tr>
                                <td class="editor-label">
                                    <label>Tarjeta Numero</label></td>
                                <td class="editor-field"></td>
                                <td class="editor-label">@*Html.LabelFor(model => model.HomePhone)*@<label>Teléfono Residencia</label></td>
                                <td class="editor-field">@Html.EditorFor(model => model.HomePhone)
                                    @Html.ValidationMessageFor(model => model.HomePhone)</td>
                            </tr>
                            <tr>
                                <td class="editor-label">
                                    <label>Contraseña</label></td>
                                <td class="editor-field"></td>
                                <td class="editor-label">@Html.LabelFor(model => model.CellPhone)</td>
                                <td class="editor-field">@Html.EditorFor(model => model.CellPhone)
                                    @Html.ValidationMessageFor(model => model.CellPhone)</td>
                            </tr>
                            <tr>

                                <td class="editor-label">
                                    <label>Departamento</label></td>
                                <td class="editor-field">
                                    @Html.DropDownList("departamentId", (IEnumerable<SelectListItem>)ViewBag.DepartamentoList, "Seleccione Departamento", new { id = "selectDepartamentoHlp01Id", width = "250px" })&nbsp;<span class="error">*</span>
                                    &nbsp;
                        <input id="ckTipoSeleccionDeptoId" type="checkbox" checked style="display: none;" />
                                    <div style="display: none">
                                        <input id="departamentId" name="departamentId" type="text" value="@ViewBag.DepartamentoEmpleadoDepto" />
                                    </div>
                                    <div>
                                        <input id="departamentId01" name="departamentId01" type="text" value="@ViewBag.DepartamentoEmpleadoDepto01" readonly="readonly" />
                                    </div>
                                </td>
                                <td class="editor-label">
                                    <label>Etnia</label></td>
                                <td class="editor-field"></td>
                            </tr>
                            <tr>
                                <td class="editor-label">@Html.LabelFor(model => model.SocialSecurityNumber)</td>
                                <td class="editor-field">@Html.EditorFor(model => model.SocialSecurityNumber)
                                    @Html.ValidationMessageFor(model => model.SocialSecurityNumber)</td>
                                <td class="editor-label">@*Html.LabelFor(model => model.Birthday)*@<label>Fecha de Nacimiento</label></td>
                                <td class="editor-fieldX">
                                    @Html.EditorFor(model => model.Birthday)
                                    @Html.ValidationMessageFor(model => model.Birthday)
                                    <img id="selectBirthdayId" style="margin-top:3px;" alt="" src="@ViewBag.CalendarPath" />
                                </td>
                            </tr>
                            <tr>
                                <td class="editor-label">
                                    <label>Fecha Contrato</label></td>
                                <td class="editor-field">
                                    <input id="selectDateHlpId" name="selectDateHlpId" type="text" style="width: 100px" />
                                    <img id="selectDataCalId" style="margin-top:3px;" alt="" src="@ViewBag.CalendarPath" />&nbsp;<span class="error">*</span>

                                </td>
                                <td class="editor-label">@*Html.LabelFor(model => model.Email)*@<label>Correo</label></td>
                                <td class="editor-field">@Html.EditorFor(model => model.Email)&nbsp;<span class="error">*</span>
                                    @Html.ValidationMessageFor(model => model.Email)</td>
                            </tr>
                            <tr>
                                <td class="editor-label">
                                    <label>Tipo Empleado</label></td>
                                <td class="editor-field">
                                    @Html.DropDownList("TipoEmpleado", (IEnumerable<SelectListItem>)ViewBag.EmployeeTypeList, "Seleccione Tipo Empleado", new { id = "selectTipoEmpleadoHlp01Id", width = "250px" })&nbsp;<span class="error">*</span>
                                    <div style="display: none">
                                        <input id="TipoEmpleado" name="TipoEmpleado" type="text" value="@ViewBag.TipoEmpleado" />
                                    </div>
                                </td>
                                <td class="editor-label">@*Html.LabelFor(model => model.OriginCityId)*@<label>Ciudad de Origen</label></td>
                                <td class="editor-field">
                                    @Html.DropDownList("OriginCityId", (IEnumerable<SelectListItem>)ViewBag.AddressId, "Seleccionar Ciudad", new { id = "OriginCityIdIdselectorid" })
                                    <div style="display: none">
                                        @Html.EditorFor(model => model.OriginCityId)
                                        @Html.ValidationMessageFor(model => model.OriginCityId)
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="editor-label">
                                    <label>Tipo</label></td>
                                <td class="editor-field">
                                    @Html.DropDownList("StatusEmpleado", (IEnumerable<SelectListItem>)ViewBag.EmployeeStatusList, "Seleccione Estado Empleado", new { id = "selectStatusEmpleadoHlp01Id", width = "250px" })&nbsp;<span class="error">*</span>
                                    <div style="display: none">
                                        <input id="StatusEmpleado" name="StatusEmpleado" type="text" value="@ViewBag.EstadoEmpleado" />
                                    </div>

                                </td>
                                <td class="editor-label">@*Html.LabelFor(model => model.BusinessAddress)*@<label>Dirección Trabajo</label></td>
                                <td class="editor-field" style="text-align: left;">@Html.EditorFor(model => model.BusinessAddress)
                                    @Html.ValidationMessageFor(model => model.BusinessAddress)</td>
                            </tr>
                            <tr>
                                <td class="editor-label">
                                    <label>Estado Civil</label></td>
                                <td class="editor-field"></td>
                                <td class="editor-label">@*Html.LabelFor(model => model.HomeAddress)*@<label>Dirección Residencia</label></td>
                                <td class="editor-field" style="text-align: left;">@Html.EditorFor(model => model.HomeAddress)
                                    @Html.ValidationMessageFor(model => model.HomeAddress)</td>
                            </tr>
                            <tr>
                                <td class="editor-label">
                                    <label>Registrar Huella dactilar:</label></td>
                                <td class="editor-field"><a href="#">Registrar</a>&nbsp;<a href="#">Necesita Ayuda?</a></td>
                                <td colspan="2" class="editor-label"></td>
                            </tr>
                            <tr>
                                <td class="editor-label"></td>
                                <td class="editor-field">
                                    <label>Huellas Registradas:</label></td>
                                <td colspan="2" class="editor-label">
                                    <label id="registeredFingerprintsId">0</label></td>
                            </tr>
                            <tr>
                                <td colspan="4" class="editor-label" style="text-align: left">
                                    <label>Configuración de Asistencia</label></td>
                            </tr>
                            <tr>
                                <td colspan="2" rowspan="2" class="editor-label" style="vertical-align: top; text-align: left;">
                                    <label>Área de Asistencia:</label>
                                    @Html.DropDownList("areaId", (IEnumerable<SelectListItem>)ViewBag.AreaList, "Seleccione Area", new { id = "selectAreaHlp01Id", width = "250px" })
                                    &nbsp;
                        <input id="ckTipoSeleccionAreaId" type="checkbox" checked style="display: none;" />
                                    <div style="display: none">
                                        <input id="areaId" name="areaId" type="text" value="@ViewBag.DepartamentoEmpleadoArea" />
                                    </div>
                                    <div>
                                        <input id="areaIdHlp" name="areaIdHlp" type="text" readonly="readonly" value="@ViewBag.DepartamentoEmpleadoArea01" />
                                    </div>
                                </td>
                                <td class="editor-field" style="text-align: left;">
                                    <label>Asistencia:</label></td>
                                <td class="editor-field">
                                    @Html.DropDownList("whetherattendanceId", (IEnumerable<SelectListItem>)ViewBag.WhetherAttendanceList, "Seleccione Opcion", new { id = "selectwhetherattendanceIdHlp01Id", width = "250px" })
                                    <div style="display: none">
                                        <input id="whetherattendanceId" type="text" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="editor-field" style="text-align: left;">
                                    <label>Establecer como administrador:</label></td>
                                <td class="editor-field">
                                    @Html.DropDownList("whetherAdministratorId", (IEnumerable<SelectListItem>)ViewBag.AdministratorList, "Seleccione Opcion", new { id = "selectwhetherAdministratorIdHlp01Id", width = "250px" })
                                    <div style="display: none">
                                        <input id="whetherAdministratorId" type="text" />
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div id="ZKT_left" class="ZKT_column">
                    <div>
                    </div>
                </div>
                <div id="ZKT_right" class="ZKT_column">
                    <div style="text-align: center; padding-top:110px;">
                        <img id="personalphotoId" alt="fotopersonal" src="@Url.Content("~/Images/userImage.gif")" /><br />
                        <label>Subir foto personal</label>
                        <span style="color: red;">
                            <label>(Tamaño optimo 120×140 Pixel)</label></span>
                        <div>
                            @using (Html.BeginForm("SubirFoto", "tabsEmpleado", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
                            {
                                <label>Subir Foto</label>
                                <input id="File1" type="file" name="image" />
@*<input id="Submit1" type="submit" value="Upload" />*@
                            }
                        </div>
                        <div class="editor-field" style="display: none;">
                            @Html.EditorFor(model => model.Image)
                            @Html.ValidationMessageFor(model => model.Image)
                        </div>
                        <div class="viosbox" id="waitDocumentiImage" style="display: none; text-align: center;">
                            <img alt="Loading" src="@Url.Content("~/Images/ajaxanim.gif")" />&nbsp;<span>Cargando ...</span>
                        </div>
                        <div style="display: none;">
                            @{
                            //BuscarDepartamento maneja el data grid
                            }
                            @*Ajax.ActionLink("Departamento", "MostrarDepartamentos", "tabsEmpleado", new { departamentId = "0", tipodepartamento = "Departamento" }, new AjaxOptions
                        {
                            UpdateTargetId = "mostraracitreeDialogid",
                            LoadingElementId = "waitDocumentiImage",
                            OnSuccess = "AjaxDocumentoSuccess",
                            OnFailure = "AjaxFailure"
                        }, new { id = "departamentoSearch01DialogID" })*@
                            @Html.ActionLink("Departamento", "getJsonData", "tabsEmpleado", new { departamento = "Depto01", parentpath = "" }, new { id = "departamentoSearch01DialogID" })
                        </div>
                        <div style="display: none;">
                            @Ajax.ActionLink("Departamento0", "BuscarDepartamento", "tabsEmpleado", new { departamentId = "0", tipodepartamento = "Departamento" }, new AjaxOptions
                        {
                            UpdateTargetId = "mostraracitreeDialogid",
                            LoadingElementId = "waitDocumentiImage",
                            OnSuccess = "AjaxDocumentoSuccess",
                            OnFailure = "AjaxFailure"
                        }, new { id = "departamentoSearch02DialogID" })
                        </div>
                    </div>
                </div>
            </div>
            <div id="ZKT_footer">
                <div style="text-align: center;">
                    <input id="btGuardarid" type="submit" value="Guardar" />&nbsp;@Html.ActionLink("Cancelar", "Index", "Employee")
                </div>
            </div>

        }


    </div>
    <div id="mostraracitreeDialogid">
        <div>
            <div style="border: 1px solid #CCCC00; margin: 5px; padding: 5px;">
                <div id="mostrartree" class="aciTree">
                </div>
            </div>
            <div>
                <input id="btCloseDepto" type="button" value="Cerrar" />
            </div>
        </div>
        <div style="display: none">
            <div id="departamentonameId">
                @ViewBag.DepartamentoName
            </div>
            <div id="departamentodescripcionId">
                @ViewBag.DepartamentoDescripcion
            </div>
            <div id="tipodepartamentoaciid">
                @ViewBag.TipoDepartamento
            </div>
        </div>
    </div>
    @Scripts.Render("~/bundles/jquery9")
    @Scripts.Render("~/bundles/jqueryui10")
    @Scripts.Render("~/bundles/jqueryacitree")
    <script type="text/javascript">

        jQuery(document).ready(initializeAddEmpleados);

        // Tree API
        var treeApi;

        function initializeAddEmpleados() {
            //alert('initializeAddEmpleados');

            var objHlp = jQuery("#sectionbodyId").css("max-width");
            jQuery("#sectionbodyId").css("max-width", "1240px");

            //Muestra las pestañas

            //Attach handlers 
            jQuery("#selectDataCalId").click(clickselectDateCalId);
            jQuery("#selectBirthdayId").click(clickselectBirthdayId);
            jQuery("#selectDepartamentoHlp01Id").change(changeselectDepartamentoHlp01Id);
            jQuery("#departamentoSearch01DialogID").click(clickdepartamentoSearch01DialogID);
            jQuery("#selectAreaHlp01Id").change(changeselectAreaHlp01Id);
            jQuery("#btGuardarid").click(clickbtGuardarid);

            //Set date picker
            jQuery("#selectDateHlpId").datepicker({
                "dateFormat": "dd/mm/yy", "showButtonPanel": true
            });
            jQuery("#Birthday").datepicker({
                "dateFormat": "dd/mm/yy", "showButtonPanel": true
            });

            //set the buttons
            jQuery("#btGuardarid").button();

            //Set dropdown default values
            setDepartamentoDefault();
            setEstadoEmpleadoDefault();
            setAreaDefault();

            //Set default date
            //defaultDate.setFullYear(2013, 7, 17);
            var defaultDate = new Date();
            var szDatanDate = '@ViewBag.StartDate'
            //szDate = szDatanDate.split(',');
            //defaultDate.setFullYear(szDate[0], szDate[1] - 1, szDate[2]);
            //jQuery("#selectDateHlpId").datepicker("setDate", defaultDate);
            jQuery("#selectDateHlpId").datepicker("setDate", szDatanDate);

            //Initialize fields 
            jQuery("#Birthday").css("width", "100px");

            //Prepare the dialogs 
            jQuery("#mostraracitreeDialogid").dialog({ autoOpen: false, modal: true });


        }

        function clickselectDateCalId(src, arg) {
            jQuery("#selectDateHlpId").datepicker("show");
        }

        function clickselectBirthdayId(src, arg) {
            jQuery("#Birthday").datepicker("show");
        }

        function changeselectBirthdayId(src, arg) {
            //debugger;

            var ckTipoSeleccion;
            ckTipoSeleccion = jQuery("#ckTipoSeleccionDeptoId").attr("checked");

            var nPos = -1;
            var hRefHlp = "";
            var dropdoenSelector = src.target;
            if (dropdoenSelector != null) {
                var selectedOption = dropdoenSelector.options[dropdoenSelector.selectedIndex].text;
                var selectedOption01 = dropdoenSelector.options[dropdoenSelector.selectedIndex].value;
                if (selectedOption != "Seleccione Departamento") {
                    //Muestra el dialogo para seleccionar departamento
                    if (ckTipoSeleccion == "checked") {
                        var hRef = jQuery("#departamentoSearch01DialogID").attr('href');
                        nPos = hRef.indexOf('=');
                        if (nPos != -1) {
                            hRefHlp = hRef.substring(0, nPos + 1);
                            hRef = hRefHlp + selectedOption01;
                            jQuery("#departamentoSearch01DialogID").attr('href', hRef);
                            //debugger;
                        }

                        jQuery("#departamentoSearch01DialogID").trigger('click');
                    }
                    else {
                        var hRef = jQuery("#departamentoSearch02DialogID").attr('href');
                        if (nPos != -1) {
                            hRefHlp = hRef.substring(0, nPos + 1);
                            hRef = hRefHlp + selectedOption01 + '&tipodepartamento=Departamento';
                            jQuery("#departamentoSearch02DialogID").attr('href', hRef);
                            //debugger;
                        }

                        jQuery("#departamentoSearch02DialogID").trigger('click');
                    }
                }
            }
        }

        function changeselectDepartamentoHlp01Id(src, arg) {
            //debugger;
            var szDepartamento = src.target.value;
            var hRef = "";
            var hRefHlp = "";
            var nPos = -1;
            var ckTipoSeleccion;

            if (szDepartamento == "") {
                return;
            }

            ckTipoSeleccion = jQuery("#ckTipoSeleccionDeptoId").attr("checked");

            if (ckTipoSeleccion === undefined) {
                hRef = jQuery("#departamentoSearch02DialogID").attr('href');
                nPos = hRef.indexOf("?");
                if (nPos != -1) {
                    hRefHlp = hRef.substring(0, nPos + 1);
                    hRefHlp = hRefHlp + 'departamentId=' + szDepartamento + '&tipodepartamento=Departamento';
                    jQuery("#departamentoSearch02DialogID").attr("href", hRefHlp);

                    jQuery("#departamentoSearch02DialogID").trigger('click');

                }
            }
            else {
                //alert(ckTipoSeleccion);
                hRef = jQuery("#departamentoSearch01DialogID").attr('href');
                nPos = hRef.indexOf("?");
                if (nPos != -1) {
                    hRefHlp = hRef.substring(0, nPos + 1);
                    hRefHlp = hRefHlp + 'departamento=' + szDepartamento + '&tipodepartamento=Departamento';
                    jQuery("#departamentoSearch01DialogID").attr("href", hRefHlp);

                    jQuery("#departamentoSearch01DialogID").trigger('click');

                }

                //debugger;
            }

            //debugger;

        }

        function AjaxFailure(ajaxContext) {
            //debugger;
            var response = ajaxContext.get_response();
            var statusCode = response.get_statusCode();
            alert("Sorry, the request failed with status code " + statusCode);
        }

        function AjaxDocumentoSuccess(msg, statusCode) {
            //debugger;

            var szTreeId = "";
            var szTreeIdHlp = "";
            var szItemText = "";
            var szMsg = "";
            var bIsOpened = "";
            var nTVPos = -1;
            var szDeptoDesc = "";
            var szTipoDepartamento = "";

            if (msg[0] != undefined) {
                szTipoDepartamento = msg[0].tipodepartamento;
                jQuery("#tipodepartamentoaciid").html(szTipoDepartamento);
            }


            treeApi = jQuery("#mostrartree").aciTree({
                jsonUrl: null,
                rootData: msg,
                callbacks: {
                    item: function (parent, item, itemData, level) {
                        //debugger;
                        // a custom item implementation to show the tree level
                        //this.setText(item, itemData.item + ' (' + level + ')');
                    }
                }
            }).aciTree('api');

            //listening for the events
            jQuery('#mostrartree').on('acitree', function (event, api, item, eventName, options) {
                //debugger;
                switch (eventName.event) {
                    case 'idset':
                        alert('the event is: idset, the old ID was: ' + options.oldId);
                        break;
                    case 'labelset':
                        alert('the event is: labelset, the old label was: ' + options.oldLabel);
                        break;
                    case 'swapped':
                        alert('the event is: swapped, the exchanged item IDs are: ' +
                            api.getId(options.item1) + ' and ' + api.getId(options.item2));
                        break;
                    case 'indexset':
                        alert('the event is: indexset, the old item index was: ' + options.oldIndex);
                        break;
                    case 'selected':
                        //debugger;
                        szTreeId = api.getId(item);
                        var objHlp = api.hasChildrens(item);
                        var szTipoDeptoaci = jQuery("#tipodepartamentoaciid").html();
                        szTipoDeptoaci = jQuery.trim(szTipoDeptoaci);

                        if (szTipoDeptoaci == "Departamento") {
                            jQuery("#departamentId").val(szTreeId);
                            jQuery("#departamentId01").val(szTreeId);
                        }
                        else {
                            jQuery("#areaId").val(szTreeId);
                            jQuery("#areaIdHlp").val(szTreeId);
                        }


                        bIsOpened = api.isOpen(item);
                        //if (!bIsOpened) {

                        //    //Assing the selected value 
                        //    if (szTipoDeptoaci == "Departamento") {
                        //        jQuery("#departamentId").val(szTreeId);
                        //        jQuery("#departamentId01").val(szTreeId);
                        //    }
                        //    else {
                        //        jQuery("#areaId").val(szTreeId);
                        //    }

                        //    //debugger;
                        //    //nTVPos = treeApi.getIndex(item);

                        //    szTreeIdHlp = treeApi.getId(item);
                        //    szTreeIdHlp = szTreeIdHlp.replace("\\", "");

                        //    var found = treeApi.path(item, true)
                        //    if (found.length) {
                        //        szMsg = wasFound01(szTreeIdHlp, found);
                        //    } else {
                        //        szMsg = notFound01(item);
                        //    }


                        //    szUrl = "/tabsEmpleado/getJsonData?ID=" + szTreeId + '&parentpath=' + szMsg;

                        //    //Pendiente por establecer donde se utiliza 
                        //    //jQuery.ajax({
                        //    //    type: 'POST',
                        //    //    url: szUrl,
                        //    //    data: null,
                        //    //    contentType: 'application/json; charset=utf-8',
                        //    //    dataType: 'json',
                        //    //    error: AjaxFailure,
                        //    //    success: acitreesuccess02
                        //    //});

                        //}
                        //else {
                        //    //Assing the selected value
                        //    if (szTipoDeptoaci == "Departamento") {
                        //        jQuery("#departamentId").val(szTreeId);
                        //        jQuery("#departamentId01").val(szTreeId);
                        //    }
                        //    else {
                        //        jQuery("#areaId").val(szTreeId);
                        //    }
                        //}
                        break;
                    case "unselected":
                        break;
                    case "focused":
                        break;
                    case "blurred":
                        break;
                    case "init":
                        break;
                    case "loaded":
                        break;
                    case "added":
                        break;
                    case "appended":
                        break;
                    case "togglefail":
                        break;
                    case "opened":
                        break;
                    case "closed":
                        break;
                    case "toggled":
                        break;
                    case "wasvisible":
                        break;
                    case "wasloaded":
                        break;
                    case "visible":
                        break;
                    case "openfail":
                        break;
                    case "loadfail":
                        //debugger;

                        if (item.length > 0) {

                            szTreeId = api.getId(item);
                            var found = treeApi.path(item, true)
                            if (found.length) {
                                szMsg = wasFound01(szTreeId, found);
                            } else {
                                szMsg = notFound01(item);
                            }
                            szUrl = "/tabsEmpleado/getJsonData?departamento=" + szTreeId + '&parentpath=' + szMsg;

                            //Obtiene los descendientes de esta rama
                            jQuery.ajax({
                                type: 'POST',
                                url: szUrl,
                                data: null,
                                contentType: 'application/json; charset=utf-8',
                                dataType: 'json',
                                error: AjaxFailure,
                                success: acitreesuccess02
                            });
                        }

                        break;
                    case "unloaded":
                        break;
                    case "removed":
                        break;
                    case "destroyed":
                        break;
                    case "locked":
                        break;
                    default:
                        debugger;
                        if (api.isItem(item)) {
                            alert('the event is: ' + eventName.event + ' for the item ID: ' + api.getId(item));
                        } else {
                            alert('the event is: ' + eventName.event + ' for the tree ROOT');
                        }
                }
            });


            //Hide load image 
            jQuery("#waitDocumentiImage").hide();

            //Attach handlers 
            jQuery("#btCloseDepto").click(clickbtCloseDepto);
            //jQuery(".optionBuscarDeptoArea a").each(eachoptionBuscarDeptoArea);

            //Create the buttons 
            jQuery("#btCloseDepto").button();


            //Show the dialog (used with the BuscarDepartamento call)
            jQuery("#mostraracitreeDialogid").dialog("option", "title", szTipoDepartamento + ": " + szDeptoDesc);

            //setter
            jQuery("#mostraracitreeDialogid").dialog("option", "width", 600);

            //display the popup dialog
            jQuery("#mostraracitreeDialogid").dialog("open");
        }

        function clickbtCloseDepto(src, arg) {

            jQuery("#mostraracitreeDialogid").dialog("close");

            //debugger;

            treeApi.destroy({
                success: function (item, options) {
                    // do something on success
                    debugger;
                },
                fail: function (item, options) {
                    // do something on fail
                    debugger;
                }
            })
        }

        function clickdepartamentoSearch01DialogID(src, arg) {
            //debugger;

            src.preventDefault();

            //Show load image
            jQuery("#waitDocumentiImage").show();

            //Get url
            var szUrlTree = jQuery(src.target).attr("href");

            jQuery.ajax({
                type: 'POST',
                url: szUrlTree,
                data: null,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                //dataType: 'html',
                error: AjaxFailed,
                success: AjaxDocumentoSuccess
            });

        }

        function eachoptionBuscarDeptoArea(nPos, src) {
            //debugger;
            jQuery(src).click(clickeachoptionBuscarDeptoArea);
        }

        function clickeachoptionBuscarDeptoArea(src, arg) {
            //debugger;
            src.preventDefault();

            var hRefHlp = jQuery(src.target).attr("href");
            var hRefObj = hRefHlp.split('/');
            var szId = hRefObj[hRefObj.length - 1];

            //Get the call option 
            var szOptionCall = jQuery("#optioncallId").html();

            if (szOptionCall == "Departamento") {
                //jQuery("#vettoreSecondoDesId").html(szDes);
                //jQuery("#Vettore2").val(szCod);
                //var objHLP = jQuery("#Destinatario");

                jQuery("#departamentId").val(szId);
            }

            if (szOptionCall == "Area") {
                jQuery("#areaId").val(szId);
            }

            jQuery("#mostraracitreeDialogid").dialog("close");

        }

        function changeselectAreaHlp01Id(src, arg) {
            //debugger;

            var szDepartamento = src.target.value;
            var hRef = "";
            var hRefHlp = "";
            var nPos = -1;
            var ckTipoSeleccion;

            if (szDepartamento == "") {
                return;
            }

            ckTipoSeleccion = jQuery("#ckTipoSeleccionAreaId").attr("checked");

            if (ckTipoSeleccion === undefined) {
                hRef = jQuery("#departamentoSearch02DialogID").attr('href');
                nPos = hRef.indexOf("?");
                if (nPos != -1) {
                    hRefHlp = hRef.substring(0, nPos + 1);
                    //hRefHlp = hRefHlp + 'departamentId=' + szDepartamento + '&tipodepartamento=Area';
                    hRefHlp = hRefHlp + 'departamentId=' + szDepartamento + '&tipodepartamento=Area';
                    jQuery("#departamentoSearch02DialogID").attr("href", hRefHlp);

                    jQuery("#departamentoSearch02DialogID").trigger('click');

                }
            }
            else {
                //alert(ckTipoSeleccion);

                hRef = jQuery("#departamentoSearch01DialogID").attr('href');
                nPos = hRef.indexOf("?");
                if (nPos != -1) {
                    hRefHlp = hRef.substring(0, nPos + 1);
                    hRefHlp = hRefHlp + 'departamento=' + szDepartamento + '&tipodepartamento=Area';
                    jQuery("#departamentoSearch01DialogID").attr("href", hRefHlp);

                    jQuery("#departamentoSearch01DialogID").trigger('click');
                    //debugger;
                }
            }
            //debugger;

        }

        function acitreesuccess(msg) {
            //debugger;

            var szUrl = "/tabsEmpleado/getJsonData";
            var szTreeId = "";
            var szTreeIdHlp = "";
            var szItemText = "";
            var szMsg = "";
            var bIsOpened = "";
            var nTVPos = -1;

            treeApi = jQuery("#tree").aciTree({
                jsonUrl: null,
                rootData: msg,
                callbacks: {
                    item: function (parent, item, itemData, level) {
                        //debugger;
                        // a custom item implementation to show the tree level
                        //this.setText(item, itemData.item + ' (' + level + ')');
                    }
                }
            }).aciTree('api');

            //listening for the events
            jQuery('#tree').on('acitree', function (event, api, item, eventName, options) {
                //debugger;
                switch (eventName.event) {
                    case 'idset':
                        alert('the event is: idset, the old ID was: ' + options.oldId);
                        break;
                    case 'labelset':
                        alert('the event is: labelset, the old label was: ' + options.oldLabel);
                        break;
                    case 'swapped':
                        alert('the event is: swapped, the exchanged item IDs are: ' +
                            api.getId(options.item1) + ' and ' + api.getId(options.item2));
                        break;
                    case 'indexset':
                        alert('the event is: indexset, the old item index was: ' + options.oldIndex);
                        break;
                    case 'selected':
                        //debugger;
                        szTreeId = api.getId(item);
                        var objHlp = api.hasChildrens(item);
                        var szTipoDeptoaci = jQuery("#tipodepartamentoaciid").html();
                        szTipoDeptoaci = jQuery.trim(szTipoDeptoaci);

                        if (szTipoDeptoaci == "Departamento") {
                            jQuery("#departamentId").val(szTreeId);
                            jQuery("#departamentId01").val(szTreeId);
                        }
                        else {
                            jQuery("#areaId").val(szTreeId);
                            jQuery("#areaIdHlp").val(szTreeId);
                        }


                        bIsOpened = api.isOpen(item);
                        //if (!bIsOpened) {

                        //    //Assing the selected value 
                        //    if (szTipoDeptoaci == "Departamento") {
                        //        jQuery("#departamentId").val(szTreeId);
                        //        jQuery("#departamentId01").val(szTreeId);
                        //    }
                        //    else {
                        //        jQuery("#areaId").val(szTreeId);
                        //    }

                        //    //debugger;
                        //    //nTVPos = treeApi.getIndex(item);

                        //    szTreeIdHlp = treeApi.getId(item);
                        //    szTreeIdHlp = szTreeIdHlp.replace("\\", "");

                        //    var found = treeApi.path(item, true)
                        //    if (found.length) {
                        //        szMsg = wasFound01(szTreeIdHlp, found);
                        //    } else {
                        //        szMsg = notFound01(item);
                        //    }


                        //    szUrl = "/tabsEmpleado/getJsonData?ID=" + szTreeId + '&parentpath=' + szMsg;

                        //    //Pendiente por establecer donde se utiliza 
                        //    //jQuery.ajax({
                        //    //    type: 'POST',
                        //    //    url: szUrl,
                        //    //    data: null,
                        //    //    contentType: 'application/json; charset=utf-8',
                        //    //    dataType: 'json',
                        //    //    error: AjaxFailure,
                        //    //    success: acitreesuccess02
                        //    //});

                        //}
                        //else {
                        //    //Assing the selected value
                        //    if (szTipoDeptoaci == "Departamento") {
                        //        jQuery("#departamentId").val(szTreeId);
                        //        jQuery("#departamentId01").val(szTreeId);
                        //    }
                        //    else {
                        //        jQuery("#areaId").val(szTreeId);
                        //    }
                        //}
                        break;
                    case "unselected":
                        break;
                    case "focused":
                        break;
                    case "blurred":
                        break;
                    case "init":
                        break;
                    case "loaded":
                        break;
                    case "added":
                        break;
                    case "appended":
                        break;
                    case "togglefail":
                        break;
                    case "opened":
                        break;
                    case "closed":
                        break;
                    case "toggled":
                        break;
                    case "wasvisible":
                        break;
                    case "wasloaded":
                        break;
                    case "visible":
                        break;
                    case "openfail":
                        break;
                    case "loadfail":
                        //debugger;

                        if (item.length > 0) {

                            szTreeId = api.getId(item);
                            var found = treeApi.path(item, true)
                            if (found.length) {
                                szMsg = wasFound01(szTreeId, found);
                            } else {
                                szMsg = notFound01(item);
                            }
                            szUrl = "/tabsEmpleado/getJsonData?departamento=" + szTreeId + '&parentpath=' + szMsg;

                            //Obtiene los descendientes de esta rama
                            jQuery.ajax({
                                type: 'POST',
                                url: szUrl,
                                data: null,
                                contentType: 'application/json; charset=utf-8',
                                dataType: 'json',
                                error: AjaxFailure,
                                success: acitreesuccess02
                            });
                        }

                        break;
                    default:
                        if (api.isItem(item)) {
                            alert('the event is: ' + eventName.event + ' for the item ID: ' + api.getId(item));
                        } else {
                            alert('the event is: ' + eventName.event + ' for the tree ROOT');
                        }
                }
            });

            //alert('aqui ?');

            var szDeptoDesc = jQuery("#departamentodescripcionId").html();
            szDeptoDesc = jQuery.trim(szDeptoDesc);

            //Show the dialog (also used with the BuscarDepartamento call)
            jQuery("#mostraracitreeDialogid").dialog("option", "title", "Departamento: " + szDeptoDesc);

            //setter
            jQuery("#mostraracitreeDialogid").dialog("option", "width", 600);

            //display the popup dialog
            jQuery("#mostraracitreeDialogid").dialog("open");

        }

        var fileIndex = 0;

        // get new File item data
        function newFile() {
            var itemData = {
                id: 'a_new_File_ID_' + fileIndex,
                item: 'File name ' + fileIndex,
                props: {
                    isFolder: false,
                    icon: 'file'
                }
            };
            fileIndex++;
            return itemData;
        }

        var folderIndex = 0;

        // get new Folder item data
        function newFolder() {
            var itemData = {
                id: 'a_new_Folder_ID_' + folderIndex,
                item: 'Folder name ' + folderIndex,
                props: {
                    isFolder: null,
                    open: false,
                    icon: 'folder'
                }/*,
                        items: []*/
            };
            folderIndex++;
            return itemData;
        }

        function wasFound01(id, item) {
            var szMsg = "";
            var path = '[root] ';
            treeApi.path(item).each(function () {
                path += '[' + treeApi.getId($(this)) + '] ';
            });
            // set item visible :)
            treeApi.setVisible(item, {
                success: function () {
                    //alert('The ID [' + id + '] has been found!\nThe path is: ' + path);
                    szMsg = 'The ID :[' + id + ']: has been found!\nThe path is: ' + path;
                }
            });
            return szMsg;
        }


        function notFound01(item) {
            var szMsg = "";
            var szTreeIdHlp = treeApi.getId(item);
            var szTreeIdHlpTxt = treeApi.getText(item);
            szTreeIdHlp = szTreeIdHlp.replace("\\", "");
            //alert('The ID [' + szTreeIdHlp + '] has not been found!');
            szMsg = 'The ID :[' + szTreeIdHlpTxt + ']: has not been found!';
            return szMsg;
        }

        function acitreesuccess02(msg) {
            //debugger;

            var liText = "";
            var path = true;
            var id = "";

            if (msg[0] == null) {

                //No thing to add
                return;
            }

            id = msg[0].parentpath;

            var found = $();
            var objLiHlp = jQuery.find('.aciTreeLi');
            var objliHlp01 = jQuery(".aciTreeLi");
            jQuery(".aciTreeLi").each(function (nPos, src) {
                //debugger;
                liText = src.innerText;
                liText = jQuery.trim(liText);
                if (liText == id) {
                    found = jQuery(src);
                    return false;
                }
                else {
                    var aqui = "true";
                }


            });

            //debugger;
            var aquiLoad = true;

            treeApi.loadFrom(found, {
                success: function (item, opts) {
                    //debugger;
                },
                fail: function (item, opt) {
                    //debugger;
                },
                unanimated: true,
                itemData: msg
            });

            //alert('Aqui no ?');
            treeApi.open(found);
        }

        function setDepartamentoDefault() {
            //debugger;

            var szOption = jQuery("#departamentId").val();

            var szDeptoddl = jQuery("#selectDepartamentoHlp01Id")[0];
            var nHas = szDeptoddl.options.childElementCount;
            var nPos = 0;
            var itemHlp;

            for (var i = 0; i < nHas; i++) {
                itemHlp = szDeptoddl.options[i];
                if (itemHlp.value == szOption) {
                    nPos = i;
                    break;
                }
            }

            szDeptoddl.selectedIndex = nPos;
        }

        function setEstadoEmpleadoDefault() {
            //debugger;

            var szOption = jQuery("#StatusEmpleado").val();
            if (szOption == "") {
                szOption = 0;
            }
            if (szOption == undefined) {
                szOption = 0;
            }

            var szStatusEmplddl = jQuery("#selectStatusEmpleadoHlp01Id")[0];
            if (szStatusEmplddl != undefined) {
                szStatusEmplddl.selectedIndex = szOption;
            }

        }

        function setAreaDefault() {
            //debugger;

            var szOption = jQuery("#areaId").val();

            var szDeptoddl = jQuery("#selectAreaHlp01Id")[0];
            var nHas = szDeptoddl.options.childElementCount;
            var nPos = 0;
            var itemHlp;

            for (var i = 0; i < nHas; i++) {
                itemHlp = szDeptoddl.options[i];
                if (itemHlp.value == szOption) {
                    nPos = i;
                    break;
                }
            }

            szDeptoddl.selectedIndex = nPos;
        }

        function AjaxFailed(response, statusCode, optionerror) {
            //debugger;
            //var response = ajaxContext.get_response();
            //var statusCode = response.get_statusCode();
            alert("Sorry, the request failed with status code: " + statusCode);
        }

        function clickbtGuardarid(src, arg) {
            //debugger;
            src.preventDefault();

            //var frmHlp = jQuery("#submitAddEditid");
            jQuery("#submitAddEditid").submit();
        }

    </script>
</body>
</html>
